Over the last decade, the World Wide Web (WWW) has grown from simple graphics and hyperlinks into rich and complex multimedia sites and presentations. Hypertext Markup Language (HTML) is a tag-based markup language that describes the visible format of data. It was one of the first and remains a widely used computer language used to build Web pages and Websites. Because HTML is a text-based language, early developers used simple text-editors to code and develop Web pages. As the popularity of the WWW increased, specific Web development tools evolved, such as HTML editors. HTML editors are essentially text editors specialized for writing HTML code. They assist the HTML author by cataloging HTML tags and common structures into menus and by being able to identify certain syntax errors. HTML editors also often display tags and content in colors so they stand out for easy reference and organization.
HTML editors improved the development experience over simple text-editors. However, the developer typically still used a Web browser or browser shell built into the HTML editor in order to view the actual appearance of the resulting Web page. While experienced Web developers are capable of intuitively coding a page that resulted in an expected visual appearance, the workflow for less-experienced developers generally included writing code, viewing the resulting appearance rendered in a Web browser, returning to the HTML editor to write more code or correct the existing code, re-rendering the new page to view the resulting appearance, returning again to the HTML editor to continue writing code, and so forth. This inefficient trial and error workflow increased the inconvenience of Web development to an ever increasing population of less-experienced Web developers. To overcome this inefficiency, graphical Web editing environments were developed.
Graphical Web editing environments generally include browser technology that interprets the HTML and displays the resulting Web page to the developer within an editing view or design view. Thus, a developer may edit the Web page by moving the rendered page content or insert graphical material directly in the design view of the editing environment. The editing environment then automatically generates the underlying HTML code to support the graphical editing. Web development environments that include such graphical-based editing includes MACROMEDIA INC.'s DREAMWEAVER™, ADOBE SYSTEMS, INC.'s GO LIVE™, MICROSOFT CORPORATION's FRONTPAGE™, and the like. Some Web editing environments, such as DREAMWEAVER™, include both graphical-based and text-based editing views that may be simultaneously displayed to the user and automatically show changes to the other view as a user makes edits in the opposite view.
In developing Web pages, developers typically use container constructs for arranging information or content on the page. In HTML, a table is a popular container construct that is widely used in the design and development of Web pages. A table is generally a collection of cells arranged in row-column format. Table content is normally contained within the cell. Additional attributes of an HTML table include a border, which is the outer edge of the table and the cells, cell padding, which is the amount of space around the content of a cell, and cell or content spacing, which is the amount of space between the cells and between the cells and the table border. Developers may manipulate these attributes to control the appearance and presentation of the table. For example, in HTML, a developer may use the code, <table border=“0” cellpadding=“0” cellspacing=“0”> . . . </table>, to create a table having zero cell padding and cell spacing and no visible border.
When viewed in the design or graphical view of a development environment, a table is usually displayed as it will appear on the final Web page. In order for a developer to work with a table, he or she maneuvers the cursor into the editing or picking region of the table's cells. The editing or picking region is the region in which the cursor changes from a pointer to an insertion marker that indicates the region within the cell that contains the information that may be edited. In larger-sized table cells, it is relatively easy to place the cursor within the picking region in order to edit the content of the table. However, when the cells are very small or when there are nested tables, it may be very difficult, if not impossible, for the developer to place the cursor in the appropriate editing or picking region. This difficulty may be increased if the table has a zero border size, no cell or content spacing, and/or no cell padding. As a result, a developer may accidentally place the cursor in the wrong picking region (e.g., the wrong cell of the table, or even the wrong cell of the wrong table), select the table border, or not be able to select the desired cell at all. Therefore, when working with small tables or tables with nested or embedded tables, a developer is generally more deliberate and, thus, more slow, in his or her actions in order to select the desired picking or editing regions with in a cell. The increased physical care may also be effected by the accuracy of the developer's pointing device or physical coordination, which may sometimes decrease the efficiency and accuracy of Web development.
Additionally, without a border, spacing, and/or cell padding, it may be difficult or impossible for the developer to view the structure of the Web page. Part of Web development includes designing the entire structure and layout of the page. During the design or editing process, if the developer cannot view the structure of the page, the design process may also be slowed or difficult.
In order to reduce this problem, especially in cases in which there are no borders, no cell padding, and/or no cell spacing, some graphical development environments add an option to place dotted lines to outline where the actual border of the table is located. However, when working with small tables and nested tables, some of these inserted lines may overlap. Therefore, the developer may still have a difficult time working with the table.
A similar problem has developed with the advent of Cascading Style Sheets (CSS). CSS is a style sheet language that allows authors and users to define style attributes, such as fonts, spacing, and the like, to structured documents, such as HTML. By separating the presentation style of documents from the content of documents, CSS typically results in simplified Web authoring and site maintenance. A division or DIV tag is a container construct within HTML that is often used in conjunction with CSS. A DIV tag may sometimes define an area of a rectangle in which content is located. It can be set up with characteristics that are similar to an HTML table, such as padding and border attributes, by applying certain CSS properties. For example, in HTML, a developer may use the code, <div style=“border-width:0px; padding:0px; margin:0px; width:100px; height:100px; left:100px; top: 100px;”> div contents</div>, to create a rectangular division having zero margin and padding and no visible border. Thus, if several DIV container rectangles are rendered closely together in the browser or a design view, the rendered images may not provide adequate space for a developer to easily select the desired picking or editing regions and may not provide enough information to the developer on the structure and layout of the Web page.